<template>
	<view>
		<view class="bg-main u-p-30 u-p-t-80">
			<view class="u-flex">
				<view class="u-m-r-20">
					<u-icon name="clock" size="80" color="#ffffff" v-if="form.state == '待入库'"></u-icon>
					<u-icon name="checkmark-circle" size="80" color="#ffffff" v-if="form.state == '已入库'"></u-icon>
					<u-icon name="close-circle" size="80" color="#ffffff" v-if="form.state == '已取消'"></u-icon>
				</view>
				<view class="u-flex-1">
					<view class="head-title u-m-b-10"><text class="u-font-bold u-font-36 white-text">{{form.state}}</text></view>
					<view class="u-font-24" v-if="form.state == '待入库'"><text class="white-text">{{form.brother.name}}于{{form.createddatetime}}创建入库单</text></view>
					<view class="u-font-24" v-if="form.state == '已入库'"><text class="white-text">入库时间为 {{form.createddatetime}}</text></view>
				</view>
			</view>
		</view>
		
		<view class="grid-box">
			<view class="u-flex">
				<view class="u-flex-1">
					<view class="msg-box u-border-bottom">
						<view class="tips-txt u-font-28">{{form.number}}</view>
						<view class="item u-p-t-0">
							<view class="u-font-36">{{form.store.name}}</view>
						</view>
						<view class="item u-p-t-0 u-p-b-20">
							<view class="u-font-28 u-tips-color"><text class="tips-txt">关联回收订单：{{form.ordernumber}}条</text></view>
						</view>
					</view>
					<view class="msg-box u-p-t-10">
						<!-- <view class="item">
							<text class="label">操作店员：</text>
							<view class="text left">{{form.staff.name}}</view>
						</view> -->
						<view class="item" v-if="form.brother">
							<text class="label">负责人：</text>
							<view class="text left">{{form.brother.name}}({{form.brother.mobile}})</view>
						</view>	
					</view>
				</view>
			</view>
		</view>
		
		<view class="box-link">
			<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
			<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
		</view>

		<!-- 待入库 —— 核实数据-->
		<view class="grid-box" v-if="form.state == '待入库'">
			<view class="head-title u-m-b-10"><text>核实数据</text></view>
			<view class="u-p-t-30">
				<u-button class="u-m-b-30" size="medium" plain @click="addGoods">+选择可回收物</u-button>
				<!-- <goods-list :orderId="id" :noPrice="true" :listData="confirmForm.details" @upDate="upDate"></goods-list> -->
				<goods-table :details="confirmForm.details"  :head="['类型','可回收物','单价','应入库','','操作']" :noPrice="true" :edit="true" @confirm="(details)=>{confirmForm.details = details}"></goods-table>
				<view class="dashed-line"></view>
				<view class="msg-box u-p-t-20">
					<view class="item">
						<text class="label">回收总数：</text>
						<view class="text left">共{{confirmForm.details.length}}种</view>
					</view>
					<view class="item" v-if="form.userorderweight > 0">
						<text class="label">回收总重：</text>
						<view class="text left">{{form.userorderweight}}KG</view>
					</view>
					<view class="item" v-if="form.userorderquantity > 0">
						<text class="label">回收总数量：</text>
						<view class="text left">{{form.userorderquantity}}个</view>
					</view>
				</view>
				<view class="total u-p-b-20 u-m-t-0">
					<text class="u-font-28">共收货成本:</text>
					<text class="total-price">
						￥{{form.userorderamount.toFixed(2)}}
					</text>
					<view><text class="tips-txt">关联{{form.userorders.length}}个上门回收订单</text></view>
				</view>
				<!-- 入库拍照 -->
				<view class="u-p-t-30" v-if="form.brotherpic.length > 0">
					<view class="head-title u-m-b-10"><text>入库拍照</text></view>
					<view class="upload-box">
						<view class="item" v-for="(item,index) in form.brotherpic" :key="index">
							<u-image width="200rpx" height="200rpx" :src="utils.getPic(item)" @click="seePhoto(fileURL+item)"></u-image>
						</view>
					</view>
				</view>
				<!-- <template>
					<view class="dashed-line"></view>
					<view class="u-p-t-30">
						<view class="head-title u-m-b-30"><text>关联上门回收订单列表(共{{form.userorders.length}}条)</text></view>
						<u-cell-group class="u-m-t-20">
							<u-cell-item 
								v-for="(item,index) in form.userorders" 
								:key="index" 
								@click="userOrderDetails(item.id)"
								class="u-p-r-0 u-p-l-0">
								<view slot="title">
									<text>{{item.number}}</text>
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>
				</template> -->
			</view>
			<view class="dashed-line"></view>
			<!-- 确认已入库时间 -->
			<view class="u-p-t-30">
				<view class="head-title u-m-b-10"><text>确认已入库时间</text></view>
				<view>
					<u-form :model="form" ref="uForm" label-width="auto" :label-style="{'color':'#909399'}">
						<u-form-item label="选择时间:">
							<view class="input-text u-flex" style="width: 100%;" @click="chooseTime = true">
								<text>{{form.addTime || '点击选择时间'}}</text>
								<view class="u-flex-1"></view>
								<u-icon name="arrow-right" class="tips-txt"></u-icon>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<!-- QC拍照 -->
			<view class="u-p-t-30">
				<view class="head-title u-m-b-10"><text>QC拍照</text></view>
				<view class="upload-box">
					<view class="item">
						<common-upload max-count="9" @on-success="uploadSuccess"></common-upload>
					</view>
				</view>
			</view>
		</view>
		<!-- 已入库 —— 入库明细汇总 -->
		<view class="grid-box" v-if="form.state == '已入库'">
			<view class="head-title u-m-b-10"><text>实际入库清单</text></view>
			<view class="">
				<goods-table :details="confirmForm.details" :noPrice="true" :head="['类型','可回收物','单价','实际入库','入库金额','操作']"></goods-table>
				<view class="dashed-line"></view>
				<view class="msg-box u-p-t-20 u-p-b-20">
					<view class="item">
						<text class="label">入库估值：</text>
						<view class="text left">{{form.orderamount.toFixed(2)}}元</view>
					</view>
					<view class="item" v-if="form.orderweight > 0">
						<text class="label">入库总重：</text>
						<view class="text left">{{form.orderweight}}KG</view>
					</view>
					<view class="item" v-if="form.orderquantity > 0">
						<text class="label">入库总数量：</text>
						<view class="text left">{{form.orderquantity}}个</view>
					</view>
				</view>
				<view class="total u-p-b-20 u-m-t-0">
					<text class="u-font-28">预估出售金额:</text>
					<text class="total-price">
						￥{{form.saleamount.toFixed(2)}}
					</text>
				</view>
			</view>
			<!-- QC拍照 -->
			<view class="u-p-t-30">
				<view class="head-title u-m-b-30"><text>QC拍照</text></view>
				<view class="upload-box">
					<view class="item" v-for="(item,index) in form.qcpic" :key="index">
						<u-image width="200rpx" height="200rpx" :src="utils.getPic(item)" @click="seePhoto(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		<!-- 已取消 -->
		<view class="grid-box" v-if="form.state == '已取消'">
			<view class="head-title u-m-b-10"><text>取消原因</text></view>
			<view class="u-p-b-30">
				<u-input v-model="form.reason" type="textarea" :border="true" :disabled="true" />
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-flex-1">
							<u-button class="w-100" @click="goList">返回</u-button>
						</view>
						<!-- <view class="u-flex-1">
							<u-button type="error" class="w-100" @click="reject">驳回</u-button>
						</view> -->
						<view class="u-flex-1" v-if="form.state == '待入库'">
							<u-button type="primary" class="w-100" @click="confirmStorage">提交</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
		<!-- 拒绝订单 -->
		<u-popup v-model="showReject" mode="center" border-radius="14" z-index="999" closeable>
			<view class="u-p-40" style="width: 600rpx;">
				<view class="section-head">
					<view class="u-p-t-30 u-p-b-30">
						<view class="blue-text"></view>
						<text class="u-font-32">请输入驳回原因</text>
					</view>
				</view>
				<view class="u-p-b-30">
					<u-input v-model="rejectForm.reason" type="textarea" :border="true" />
				</view>
				<u-button type="primary" class="navbtn" @click="showReject = false">确定</u-button>
			</view>
		</u-popup>
		<!-- 分拣清算（弹窗） -->
		<!-- <u-popup v-model="chooseShow" mode="bottom" :closeable="true" border-radius="14">
			<goods-choose :orderId="id" :details="confirmForm.details" @confirm="confirmChoose"></goods-choose>
		</u-popup> -->
		<!-- 选择入库时间 -->
		<u-picker v-model="chooseTime" mode="time" :params="params" @confirm="changeTime"></u-picker>
		<!-- <u-calendar v-model="chooseTime" mode="date" active-bg-color="#10beca" @change="changeTime"></u-calendar> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				form: {
					store:{},
					make: [],
					userorderamount:0,
					commission:0,
					orderamount: 0,
					lossamount:0,
					lossratio:0,
					brother:{},
					brotherpic: [],
					qcpic: [],
					addTime:""
				},
				storageData: [],
				showReject: false,
				rejectForm:{
					reason: ''
				},
				// 分拣清算
				chooseShow: false,
				confirmForm:{
					orderid:0,
					details: [
						// {
						// 	id: 0,
						// 	name: '杂纸',
						// 	weight: 10,
						// 	price: 9.9
						// }
					],
					total: 0
				},
				// 提示价格范围
				tips:[],
				qcPic: '',
				// 选择入库时间
				chooseTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetails(this.id)
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			}),
			...mapState('shop', {
				goodsDetails: state => state.goodsDetails,
			})
		},
		watch: {
			goodsDetails(value){
				let confirmForm = {
					orderid: this.orderId,
					details: value
				}
				this.confirmChoose(confirmForm)
			}
		},
		onPullDownRefresh() {
			this.getDetails(this.id).then(()=>{
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		methods: {
			getDetails(id){
				return this.$u.get('/Store/InOrder/Details?id='+id).then((res)=>{
					this.form = res
					this.confirmForm.details = []
					this.form.make.forEach((item)=>{
						item.details.forEach((cell)=>{
							this.confirmForm.details.push({
								"show": false,
								"id": cell.productid,
								"price": cell.price,
								"weight": this.form.state == '待入库'? cell.originalweight: -1,
								"originalweight": this.form.state == '已入库'? cell.originalweight: -1, //应入库
								"approvedweight": this.form.state == '已入库'? cell.approvedweight: -1, //实入库
								"typeremarks": cell.remarks,
								"allowedit": true,
								"minprice": 0,
								"highprice": 0,
								"err": false,
								"typenames": item.names,
								"name": cell.productname,
								"isweighing": cell.isweighing,
								"typeid": item.id,
								"pic": item.icon,
								"on": true,
								"amount": cell.amount
							})
						})
					})
					this.qcPic = this.form.qcpic
				})
			},
			addGoods(){
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
				uni.navigateTo({
					url: `/pages/shop/goodsChoose/goodsChoose?orderId=${this.id}&noPrice=true`,
				});
			},
			userOrderDetails(id){
				// uni.navigateTo({
				// 	url: ''
				// })
			},
			seePhoto(url){
				console.log('seePhoto',url)
				let img = this.fileURL + url
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			goList(){
				uni.navigateTo({
					url: '../list/list'
				})
			},
			reject(){
				this.showReject = true
			},
			// 上传照片
			uploadSuccess(data, index, lists, name) {
				this.qcPic = []
				lists.forEach((item,index)=>{
					this.qcPic.push(item.response.datas.path)
				})
			},
			// 上传图片失败时处理
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			// 删除分拣清算列表
			delGoods(index){
				uni.showModal({
					title: '提示',
					content: '确认删除此条回收物？',
					success: (res)=> {
						if (res.confirm) {
							this.confirmForm.details.splice(index,1)
							// 重新计算合计总价
							this.setTotal()
						}
					}
				})
			},
			// 关闭分拣清算窗口
			confirmChoose(confirmForm){
				this.confirmForm.orderid = this.id
				// 获取上一次添加的回收品信息
				let historyArr = []
				if(this.confirmForm.details.length > 0){
					historyArr = JSON.parse(JSON.stringify(this.confirmForm.details))
				}
				
				// 提示信息
				this.tips = []
				let details = confirmForm.details
				this.confirmForm.details = details

				this.chooseShow = false
			},
			upDate(confirmForm){
				this.confirmForm.orderid = this.id
				this.confirmForm.details = confirmForm.details
				
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item, index) => {
					this.confirmForm.total += item.weight*item.price
				})
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
				this.chooseShow = false
			},
			upDateGoodsList(details){
				this.confirmForm.details = details
			},
			// 计算合计值
			setTotal(){
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item)=>{
					this.confirmForm.total += item.weight*item.price
				})
			},
			// 待入库：提交
			confirmStorage(){
				// 检查回收物是否填写了重量
				let check = true
				if(this.form.state == '待入库'){
					try {
					    this.confirmForm.details.forEach(item => {
					        if(item.weight == null || item.weight == 0){
								uni.showToast({
									title: '请填写'+item.name+'的数量',
									icon: 'none'
								})
					            throw Error()
					        }
					    })
					} catch(error) {
						check = false; 
					}
				}
				if(!this.form.addTime || this.form.addTime == ''){
					// uni.showToast({
					// 	title: '请选择已入库时间',
					// 	icon: 'none'
					// })
					// check = false; 
					this.form.addTime = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
				}
				
				if(!check){
					return
				}
				
				let form = {
					id: this.id,
					qcPic: this.qcPic,
					// brotherpic: this.form.brotherpic,
					addTime: this.form.addTime,
					details: []
				}
				// debugger
				this.confirmForm.details.forEach((item)=>{
					form.details.push({
						productId: item.id,
						weight: item.weight,
						// price: parseFloat(item.price),
						typeremarks: item.typeremarks
					})
				})
				console.log(form)
				this.$u.post('/Store/InOrder/Storage', form).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.getDetails(this.id)
				})
			},
			// 选择已出库时间
			changeTime(e){
				console.log(e);
				this.form.addTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dashed-line{
		position: relative;
		left: -30rpx;
		width: 690rpx;
		border-bottom: 1px dashed #e4e7ed;
		&:after{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			
		}
		&:before{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
		}
	}
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		// width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
	.user-msg{
		padding-bottom: 30rpx;
		.list{
			.item{
				font-size: 28rpx;
				margin-bottom: 4rpx;
			}
		}
	}
	.bd {
		.td {
			height: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
	.bottom-box{
		.fixed-container{
			position: fixed;
			bottom: 0;
			z-index: 99;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 132rpx;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
		.fixed-placeholder{
			height: 132rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}
		.total{
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
		.btn-group{
			padding: 30rpx;
			.u-flex-1+.u-flex-1{
				margin-left: 20rpx;
			}
		}
	}
	.w-100{
		width: 100%;
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		// font-weight: bold;
		.total-price {
			font-size: 40rpx;
			color: $u-color-orange;
		}
	}
	.pack{
	    display: flex;
	    align-items: center;
	    .item{
			width:40%;
			border: 1px solid $u-border-color;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
	        .name{
	            font-size: 28rpx;
				margin-bottom: 10rpx;
	        }
	        .text{
	            color: $u-color-gray;
				font-size: 24rpx;
	        }
	    }
	}
</style>
